/**
 * 获取商品id值
 */
function getProductId() {
    
    let url = location.href
    let index = url.indexOf('?')
    let subUrl = url.substring(index + 1)    // id=88710868
    let id = subUrl.split('=')[1]    // 88710868
    return id
}

/**
 * 商品详情数据
 */

function loadProduct() {
    let id = getProductId()
    $.ajax({
        url:'http://www.xiongmaoyouxuan.com/api/detail',
        type:'GET',
        dataType: 'json',
        data:{
            id,
            normal: 1,
            sa: ""
        },
        success:function(result) {
            if(result.code === 200) {
                let detail = result.data.detail
                let shangjia = result.data.shop
                showDetail(detail,shangjia)
            }
        }
    })
}

/**
 * 商品详情数据渲染
 */
function showDetail(detail,shangjia) {
    let data = {
        detail,
        shangjia
    }
    let detailStr = template('productDetails-list',data)
    $('#product-detail').html(detailStr)
    magnify()
}
loadProduct()

/**
 * 数据添加购物车
 */
function join(product) {
    let detail = product;
    let allpro = localStorage.getItem('CARS');
    allpro = JSON.parse(allpro) || [];
    let alist = allpro.find((item) => {
        return item.id == detail.id
    })
    if (alist) {
        alist.num++;
    } else {
        allpro.unshift({
            id: detail.id,
            num: 1,
            state: false,
            img: detail.photo[0].url,
            price: detail.price,
            title: detail.title,
        });
    }
    localStorage.setItem('CARS', JSON.stringify(allpro));
}

/**
 * 回到顶部
 *     左边商品分类选择区(菜单列表)
 *     当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
 */

$(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $("#back-top").fadeIn(1500);
        } else {
            $("#back-top").fadeOut(1500);
        }
    });

    //当点击跳转链接后，回到页面顶部位置

    $("#back-top").click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
});

/**
 * 点击小图切换相应大图
 *   prop() 方法设置或返回被选元素的属性和值。
 *     当该方法用于返回属性值时，则返回第一个匹配元素的值。
 *     当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
 */
function clickEle(img) {
    $('#showImg').prop('src',img)
}

/**
 * 放大镜效果
 */
function magnify() {
    $('.showphoto')[0].addEventListener('mouseover', function(e) {
        e = e || window.event
        $('.bigImg')[0].style.display = 'block'
        $('#bigphoto')[0].style.display = 'block'
        let img = $('#showImg')[0].src
        $('.bigimage').attr('src', img)

        $('.showphoto')[0].onmousemove = function (e) {
            // 边界判断
            let leftpx = e.offsetX;
            let toppx = e.offsetY;
            console.log("$('.bigImg').height", $('.bigImg').height(), "$('.bigImg').width", $('.bigImg').width());
            if (leftpx < $('.bigImg').width() / 2) {
                leftpx = $('.bigImg').width() / 2
            }
            if (leftpx > $('.showphoto').width() - $('.bigImg').width() / 2) {
                leftpx = $('.showphoto').width() - $('.bigImg').width() / 2
            }
            if (toppx < $('.bigImg').height() / 2) {
                toppx = $('.bigImg').height() / 2
            }
            if (toppx > $('.showphoto').height() - $('.bigImg').height() / 2) {
                toppx = $('.showphoto').height() - $('.bigImg').height() / 2
            }
            $('.bigImg').css({ 'left': `${leftpx - 50}px`, 'top': `${toppx - 50}px` })
            $('.bigimage').css({ 'marginLeft': `${-1 * parseInt($('.bigImg').css('left').split('px').join('') * 4)}px`, 'marginTop': `${-1 * parseInt($('.bigImg').css('top').split('px').join('') * 4)}px` })
        }
        $('.showphoto')[0].onmouseout = function (e) {
            $('.bigImg')[0].style.display = 'none';
            $('#bigphoto')[0].style.display = 'none';
        }
    })
}


//  跳转首页
function homePages() {
    location.href = '../pages/index.html'
}

// 跳转9块9包邮
function packageMail() {
    location.href = '../pages/packageMail.html'
}

// 跳转超值大额券
function ticket() {
    location.href = '../pages/ticket.html'
}

// 跳转降温急救穿搭
function coolOutfit() {
    location.href = '../pages/coolOutfit.html'
}

function shoppinginfomation() {
    location.href = '../pages/productDetails.html'
}

// 跳转到购物车
function goingCart() {
    location.href = '../pages/productCart.html'
}